import { motion } from "framer-motion";
import { FaGithub, FaEnvelope, FaWeixin, FaBlog } from 'react-icons/fa';
import { contactData } from './data/contact';

export const Contact = () => {
  return (
    <div className="w-full h-full flex items-center justify-center">
      <div className="max-w-6xl mx-auto px-4 text-center">
        <h2 className="text-3xl font-bold mb-12">联系方式</h2>
        <div className="grid md:grid-cols-4 gap-8">
          <motion.div
            whileHover={{ scale: 1.05 }}
            className="bg-white p-6 rounded-lg shadow-md"
          >
            <div className="flex flex-col items-center">
              <FaGithub className="w-12 h-12 text-gray-800 mb-4" />
              <h3 className="text-xl font-semibold mb-2">GitHub</h3>
              <a
                href={contactData.github.url}
                target="_blank"
                rel="noopener noreferrer"
                className="text-blue-500 hover:text-blue-600"
              >
                @{contactData.github.username}
              </a>
            </div>
          </motion.div>

          <motion.div
            whileHover={{ scale: 1.05 }}
            className="bg-white p-6 rounded-lg shadow-md"
          >
            <div className="flex flex-col items-center">
              <FaEnvelope className="w-12 h-12 text-red-500 mb-4" />
              <h3 className="text-xl font-semibold mb-2">邮箱</h3>
              <a
                href={`mailto:${contactData.email}`}
                className="text-blue-500 hover:text-blue-600"
              >
                {contactData.email}
              </a>
            </div>
          </motion.div>

          <motion.div
            whileHover={{ scale: 1.05 }}
            className="bg-white p-6 rounded-lg shadow-md"
          >
            <div className="flex flex-col items-center">
              <FaWeixin className="w-12 h-12 text-green-500 mb-4" />
              <h3 className="text-xl font-semibold mb-2">微信</h3>
              <p className="text-gray-600">{contactData.wechat.id}</p>
              {contactData.wechat.qrcode && (
                <img
                  src={contactData.wechat.qrcode}
                  alt="微信二维码"
                  className="w-24 h-24 mt-2"
                />
              )}
            </div>
          </motion.div>

          <motion.div
            whileHover={{ scale: 1.05 }}
            className="bg-white p-6 rounded-lg shadow-md"
          >
            <div className="flex flex-col items-center">
              <FaBlog className="w-12 h-12 text-purple-500 mb-4" />
              <h3 className="text-xl font-semibold mb-2">博客</h3>
              <a
                href={contactData.blog.url}
                target="_blank"
                rel="noopener noreferrer"
                className="text-blue-500 hover:text-blue-600"
              >
                {contactData.blog.name}
              </a>
            </div>
          </motion.div>
        </div>

        <motion.p
          className="mt-12 text-gray-600"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.5 }}
        >
          欢迎通过以上方式与我联系，期待与您的交流！
        </motion.p>
      </div>
    </div>
  );
};